<template>
    <div style="position: relative;">
        <!-- 导航 -->
        <van-nav-bar title="资讯">
            <template #right>
                <van-icon name="search" size="18" />
            </template>
        </van-nav-bar>

        <!-- 轮播图 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item>
                <img src="../../assets/sort/4.webp" alt="">
            </van-swipe-item>
            <van-swipe-item>
                <img src="../../assets/sort/5.webp" alt="">
            </van-swipe-item>
            <van-swipe-item>
                <img src="../../assets/sort/6.webp" alt="">
            </van-swipe-item>
            <van-swipe-item>
                <img src="../../assets/sort/12.webp" alt="">
            </van-swipe-item>
        </van-swipe>
        <div class="zhezhao">
            <p>什么季节吃羊肉最好！</p>
        </div>

        <!-- 分类推荐 -->
        <van-sidebar>
            <van-sidebar-item title="热门话题" />
        </van-sidebar>

        <van-row>
            <van-col span="10" style="margin: 0px 10px;" @click="$router.push('/one')">
                <img src="../../assets/sort/12.webp" alt="">
                <b>#夏天经常吃辣的<br>&nbsp;&nbsp;&nbsp;好处和坏处！</b>
            </van-col>
            <van-col span="10" style="margin: 0px 10px;" @click="$router.push('/two')">
                <img src="../../assets/sort/13.webp" alt="">
                <b>#生病的人多吃海参<br>&nbsp;&nbsp;&nbsp;好处和坏处！</b>
            </van-col>
        </van-row>

        <!-- <div style="height: 30px;background-color: black;opacity: 0.1;margin-top: 18px;"></div> -->
        
        <van-sidebar>
            <van-sidebar-item title="为你推荐" />
        </van-sidebar>
        <van-row class="one">
            <van-col span="10" style="margin: 0px 10px;" @click="$router.push('/three')">
                <img src="../../assets/sort/14.webp" alt="">
                <span>#好好吃的饭饭啊！</span>
            </van-col>
            <van-col span="10" style="margin: 0px 10px;" @click="$router.push('/four')">
                <img src="../../assets/sort/15.webp" alt="">
                <span>#好香的生鱼片啊！</span>
            </van-col>
        </van-row>
        <van-row>
            <van-col span="10" style="margin: 0px 10px;" class="span1" @click="$router.push('/five')">
                <img src="../../assets/sort/16.webp" alt="">
                <p>#咸蛋蛋黄酥到底<br>&nbsp;&nbsp;&nbsp;<span style="margin-top: -46px;">有多好吃？</span></p>
            </van-col>
            <van-col span="10" style="margin: 0px 10px;" class="span1" @click="$router.push('/six')">
                <img src="../../assets/sort/17.webp" alt="">
                <p>#这是什么好吃的？</p>
            </van-col>
        </van-row>
    </div>
</template>

<script setup>
    import { createApp } from 'vue';
    import { Swipe, SwipeItem } from 'vant';

    const app = createApp();
    app.use(Swipe);
    app.use(SwipeItem);

</script>

<style lang="scss" scoped>
    .van-swipe{
        height: 250px;
        line-height: 250px;
    }
    .my-swipe .van-swipe-item {
        color: #fff;
        font-size: 20px;
        line-height: 250px;
        text-align: center;
    } 
    img{
        width: 100%;
        height: 250px;
        object-fit: cover;
    }
    b{
        position: absolute;
        top: 46%;
        color: #fff;
        margin-left: 15px;
        font-size: 18px;
        font-weight: bold;
    }
    span{
        position: absolute;
        top: 73%;
        color: #fff;
        margin-left: 15px;
        font-size: 18px;
        font-weight: bold;
    }
    .van-col p{
        position: absolute;
        top: 88%;
        color: #fff;
        margin-left: 15px;
        font-size: 18px;
        font-weight: bold;
    }
    .zhezhao{
        width: 100%;
        height: 50px;
        background-color: black;
        opacity: 0.4;
        position: absolute;
        bottom: 0;
        top: 25%;
    }
    p{
        font-size: 20px;
        line-height: 50px;
        margin-left: 18px;
        color: white;
    }
    .van-sidebar{
        margin: 15px 10px;
    }
    .van-sidebar-item{
        font-size: 16px;
        width: 300px;
    }
    .van-row img{
        width: 168px;
        padding: 5px;
        object-fit: cover;
        height: 150px;
    }
</style>